<template>
    <div class="formBox" style="width: 100%;height:100%;">
        <rx-fit>
            <template #head>
                <div style="padding:10px;text-align: right;">
                    <a-button type="primary" id="btnPrint">{{ $ti18('rxForm.print', '打印') }}</a-button>
                </div>
            </template>
            <template #middle>
                <div class="fitContainer">
                    <div class="contents">
                        <div class="fitContentBox" ref="printArea">
                            <bpm-inst-info v-if="bpmInst" :bpmInst="bpmInst"/>
                            <rx-forms ref="rxForms" v-if="formType=='online'" class="rx-form"></rx-forms>
                        </div>
                    </div>
                </div>
            </template>
        </rx-fit>
    </div>
</template>
<script>
import {RxFit} from '@lowcode/jpaas-base-lib';
import BpmInstApi from "@/common/api/bpm/bpmInst";
import RxForms from "./RxForms.vue";
import BpmInstInfo from "@/views/modules/bpm/components/BpmInstInfo.vue";
import {mapState} from 'pinia';
import userUser from "@/stores/userUser";

export default {
    name: "bpm-inst-start",
    computed: {
        ...mapState(userUser, ['user'])
    },
    components: {
        RxFit,
        RxForms,
        BpmInstInfo
    },
    data() {
        return {
            formType: "online",
            formComponent: "",
            pk: "",
            defId: "",
            instId: "",
            bpmInst: {}
        }
    },
    created() {

        this.initProcessConfig();
    },
    mounted() {
        this.initPrint("btnPrint", "printArea");
    },
    methods: {
        initPrint(btnPrintId, printArea, callback) {
            this.btnPrint = btnPrintId;
            this.printArea = printArea;
            var self_ = this;
            if (callback) {
                callback();
            }
            document.getElementById(this.btnPrint).addEventListener("click", function () {
                self_.print(callback);
            })
        },
        print(callback) {
            var self_ = this;
            var bodyHtml = window.document.body.innerHTML;
            var printHtml = this.$refs[this.printArea].innerHTML;
            window.document.body.innerHTML = printHtml;

            setTimeout(function () {
                window.print();
                window.document.body.innerHTML = bodyHtml;
                if (callback) {
                    callback();
                }
                document.getElementById(self_.btnPrint).addEventListener("click", function () {
                    self_.print(callback);
                })
            }, 2000);
        },
        initProcessConfig() {
            var params = this.$route.params;
            this.defId = params.defId;
            this.instId = params.instId;

            var self_ = this;
            BpmInstApi.getProcessConfig(self_.defId).then(res => {
                if (!res.success) {
                    this.$message.warning(res.message);
                    return;
                }
                //加载表单。
                if (self_.formType == "online") {
                    self_.initForm();
                }
            })
        },
        /**
         * 使用表单的数据进行合并。
         * @param formData
         */
        handOpenerData(formData) {
            if (!window.opener || !window.opener.formData) {
                return;
            }

            //处理从表单传递过来的数据。
            let formJson = window.opener.formData.formJson;
            if (typeof formJson == "string") {
                formJson = JSON.parse(formJson);
            }

            for (let item of formData) {
                let data = formJson[item.alias];
                Object.assign(item.data, data);
            }

        },
        async initForm() {
            var params = {defId: this.defId};
            if (this.instId) {
                params.instId = this.instId;
            }

            let res = await BpmInstApi.getViewByDefId(params);
            if (!res.success) {
                this.$message.warning(res.message);
                return;
            }
            var data = res.data;

            var formData = data.formData;

            //增加流程实例数据显示。
            this.bpmInst = data.bpmInst;

            //审批历史
            var histories = data.histories || [];
            //处理表单数据。
            this.handOpenerData(formData);


            var curUser = this.user;
            var contextData = {
                type: "print",
                curUserId: curUser.userId,
                curUserName: curUser.fullName,
                account: curUser.account,
                deptId: curUser.deptId,
                instId: this.instId,
                defId: this.defId,
                tenantId: curUser.tenantId,
                tenantLabel: curUser.tenantLabel,
                opinionHistorys: histories,
                //当前是否为发起人
                starter:this.bpmInst ? this.bpmInst.createBy==curUser.userId : true,
            };
            this.$refs.rxForms.setData(formData, true, contextData, true);
        }
    }

}
</script>
<style scoped>
@media print {
    .noprint {
        display: none
    }
}
.rx-form{
    padding: 10px;
}
.formBox >>> .rx-fit {
    padding: 0;
}

.formBox >>> .fit-header.showBorder {
    box-shadow: 0px 1px 4px #dddddd;
}

.formBox >>> .divdefault {
    overflow: hidden;
}

.fitContainer {
    background: #f0f2f5;
    padding-right: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.fitContainer .contents {
    min-height: 100%;
    box-sizing: border-box;
}

.fitContentBox {
    background: #fff;
    margin: auto;
    width: 100%;
    max-width: 1300px;
}
.fitContentBox ::v-deep(.flowHeaderTitles){

}
</style>

